import * as echarts from '../../ec-canvas/echarts.min';
import {
  lgRequest
} from '../../utils/ajax'
const app = getApp();

Page({
  data: {
    ec: {
      // onInit: initChart,
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: false
    },
    ecPie: {
      // onInit: initChart,
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: false
    },
    isTEshow: true, //控制第三图表的显隐
    height: 0,
    width: 0,
    num: 0.58,
    nowork: [], //未处理工单
    todaywork: [], //今日数据统计
    sevenday: [], //七日内工单完成情况
    okwork: [], //完结工单故障原因占比
    isShowQie: 'true', //控制显示隐藏
    mychart: '',
    parentList: [], //父级元素
    childrenList: [], //子级元素
    isShowP: true, //控制父元素显隐
    selectItemID: '20', //收集的父元素id
    selectItemCid: '', //收集的子元素id
    piedataO: [],
    createT: [], //完成时间
    jichengN: [], //集成问题
    dianliN: [], //电力问题
    wangluoN: [], //网络问题
    shebeiN: [], //设备问题
    isyunweiShow: false, //打开运维人员
    weichuliList: [],
    peopleList: [],
    nickNameO: [], //人员数据
    sumO: [], //未完成工单数
    Xindex: 1, //效率下标
    zhanList:[],
    xiaolvButtom: [{
      name: '运维组',
      indexO: 0
    }, {
      name: '网络组',
      indexO: 1
    }, {
      name: '其他',
      indexO: 2
    }],
    isjichengShow: false, //集成问题弹窗
    iswangluoShow: false, //网络问题弹窗
    isdianliShow: false, //电力问题弹窗
    isshebeiShow: false, //设备问题弹窗
    jichengList: [],
    wangluoList: [],
    dianliList: [],
    shebeiList: [],
    loadingHidden: true,
    yunweiList:[],
    isXuncha:false,
    xunchaList:[]
  },
  // 跳转详情页
  toXiangqing(e) {
    console.log("页面传参",e.currentTarget.dataset.item);
    let info = JSON.stringify(e.currentTarget.dataset.item);
    // console.log(infos,'infos');
    wx.navigateTo({
      url: `../minePage/toOrderXiang/toOrderXiang?info=${info}`,
    })
  },
  // 打开设备问题弹窗
  Oshebei() {
    this.setData({
      loadingHidden: false
    })
    let params = {
      type: 2
    }
    lgRequest('weichuliListFenzu', params, {
      doSuccess: r => {
        r.data.map((item)=>{
          if(item.userName == null){
            item.userName = '暂无'
          }
        })
        console.log(r, '设备问题分组信息')
        this.setData({
          shebeiList: r.data,
          isshebeiShow: true,
          isTEshow: false,
          loadingHidden: true
        })
      }
    })
  },
  // 获取驾驶舱获取站点总数和各状态总数
  getZhanStutes(){
    
    lgRequest('_getZhanStutes', {}, {
      doSuccess: r => {
        
        console.log(r, '站点状态')
        this.setData({
          zhanList : r.data
        })
      }
    })
  },
  // 打开电力问题弹窗
  Odianli() {
    this.setData({
      loadingHidden: false
    })
    let params = {
      type: 4
    }
    lgRequest('weichuliListFenzu', params, {
      doSuccess: r => {
        console.log(r, '电力问题分组信息')
        r.data.map((item)=>{
          if(item.userName == null){
            item.userName = '暂无'
          }
        })
        this.setData({
          dianliList: r.data,
          isdianliShow: true,
          isTEshow: false,
          loadingHidden: true
        })
      }
    })
  },
  // 打开网络问题弹窗
  Owangluo() {
    this.setData({
      loadingHidden: false
    })
    let params = {
      type: 3
    }
    lgRequest('weichuliListFenzu', params, {
      doSuccess: r => {
        console.log(r, '网络问题分组信息')
        this.setData({
          wangluoList: r.data,
          iswangluoShow: true,
          isTEshow: false,
          loadingHidden: true
        })
      }
    })
  },
  // 打开集成弹窗
  Ojicheng() {
    this.setData({
      loadingHidden: false
    })
    let params = {
      type: 1
    }
    lgRequest('weichuliListFenzu', params, {
      doSuccess: r => {
        console.log(r, '集成问题分组信息')
        this.setData({
          jichengList: r.data,
          isjichengShow: true,
          isTEshow: false,
          loadingHidden: true
        })
      }
    })
  },
  //控制父级元素显隐
  PL() {
    this.setData({
      isShowP: !this.data.isShowP
    })
    // console.log(this.data.isShowP);
  },
  //请求子元素以及七日内工单完成情况数据
  PLChoose(e) {
    // console.log(e);
    this.setData({
      selectItemID: e.target.dataset.id
    })
    this.getChildrenList()
    this.setData({
      isShowP: !this.data.isShowP
    })
    this.getsevenday()
  },
  //请求七日内的子集元素
  ChooseCid(e) {
    // console.log(e);
    this.setData({
      selectItemCid: e.currentTarget.dataset.item.id
    })
    this.getsevenday()
  },
  //控制显示与隐藏
  toggleQie() {
    wx.navigateTo({
      url: '/pages/productiveness/productiveness'
    })
  },
  // 测试用
  goText1() {
    wx.navigateTo({
      url: '/pages/Text1/Text1'
      // pages/cartCockpit/cartCockpit
    })
    // console.log(222);
  },
  //弹出运维人员列表
  Oyunwei() {
    this.setData({
      loadingHidden: false
    })
    lgRequest('yunweirenyuan', {}, {
      doSuccess: r => {
        console.log(r, '运维人员分组信息')
        r.data.map((item)=>{
          if(item.createTime == null){
            item.createTime = '暂未处理工单'
          }
        })
        this.setData({
          yunweiList:r.data,
          isyunweiShow: true,
          isTEshow: false,
          loadingHidden: true
        })
      }
    })
  },
  getgongdanXiangqing() {
    lgRequest('gongdanX', {}, {
      doSuccess: r => {
        console.log(r, '运维人员')
      }
    })
  },
  // 获取未处理工单信息接口
  getNowork() {
    lgRequest('getNowork', {}, {
      doSuccess: r => {
        console.log(r, '未处理工单')
        this.setData({
          weichuliList: r.data
        })
        // var deviceLv= getRegExp('^[1-9]/d')
        // deviceLv = r.deviceOnlineSum/r.deviceSum*100
        // this.setData({
        //   deviceLv
        // })
      }
    })
    // console.log(111);
  },
  // 获取今日数据统计
  getToday() {
    lgRequest('getTodatwork', {}, {
      doSuccess: r => {
        console.log(r, '今日数据统计')
        this.setData({
          todaywork: r.data
        })
      }
    })
  },
  //关闭运维人员
  closeY() {
    this.setData({
      isyunweiShow: false,
      isTEshow: true,
      isjichengShow: false,
      iswangluoShow: false,
      isdianliShow: false,
      isshebeiShow: false,
    })
  },
  // 打开运维巡查记录
  openX(e){
    console.log(e.currentTarget.dataset.item.conductor);
    this.setData({
      loadingHidden: false
    })
    let params = {
      conductor: e.currentTarget.dataset.item.conductor
    }
    lgRequest('weichuliListFenzu', params, {
      doSuccess: r => {
        console.log(r, '运维巡查分组')
        this.setData({
          xunchaList: r.data,
          isTEshow: false,
          loadingHidden: true
        })
      }
    })

    this.setData({
      isXuncha:true,
      isyunweiShow:true
    })
  },
  // 关闭运维巡查
  closeX(){
    this.setData({
      isXuncha:false
    })
  },
  // 通过code获取字典对应值
  getCodeJ() {
    lgRequest('getCodeJ', {}, {
      doSuccess: r => {
        console.log(r, '这是未处理工单');
        var noworkO = r.data.map((item) => {
          if (item.typeName == null) {
            item.typeName = 0
          }
          return item
        })
        this.setData({
          nowork: noworkO
        })
        // console.log(noworkO, 'getCode')
      }
    })
  },
  // 跳转至驾驶舱页面
  goCar() {
    wx.switchTab({
      url: '/pages/cartCockpit/cartCockpit'
      // pages/cartCockpit/cartCockpit
    })
  },
  /**
   * 
   * 获取左侧列表信息} 
   */
  fList() {
    let params = {};
    lgRequest('fList', params, {
      errAlert: false,
      doSuccess: r => {
        if (r.code == 200) {
          // console.log(r.data.list,'这是父级元素')
          this.setData({
            parentList: r.data.list
          })
        } else {
          wx.showToast({
            title: r.msg,
            icon: 'none'
          })
        }
      },
      doComplete: r => {}
    })
  },
  /**
   * 
   * @param {获取子集列表} options 
   */
  getChildrenList(Fid) {
    // debugger
    let params = {
      fatherId: this.data.selectItemID || Fid
    }
    lgRequest('packetList', params, {
      errAlert: false,
      doSuccess: r => {
        if (r.code == 200 && r.data.length >= 1) {
          // console.log(r,'这是子元素');
          this.setData({
            childrenList: r.data
          })
        } else {
          wx.showToast({
            title: r.msg,
            icon: 'none'
          })
        }
      },
      doComplete: r => {}
    })
  },
  // 获取完结工单故障占比
  getOkwork() {
    lgRequest('getOkwork', {}, {
      doSuccess: r => {
        // console.log(r, '完结工单故障占比')
        var res = []
        r.data.map((item) => {
          res.push({
            value: item.shuliang,
            name: item.problemType
          })
          return res
        })
        this.setData({
          piedataO: res
        })

      }
    })
  },
  // 人员统计
  hoemPeople(num) {
    var numO = num || 1
    console.log(numO);
    let params = {
      userGroup: numO
    }
    lgRequest('renyuanTongji', params, {
      doSuccess: r => {
        console.log(r, '人员统计')
        var nickNameO = []
        var sumO = []
        r.data.map((item) => {
          nickNameO.push(item.nickName)
          sumO.push(item.sum)
        })
        this.setData({
          peopleList: r.data,
          nickNameO: nickNameO,
          sumO: sumO
        })
      }
    })
    setTimeout(() => {
      this.initChartThree(this.data.nickNameO, this.data.sumO);
    }, 500);
  },
  ChoemPeople(e) {
    this.hoemPeople(e.currentTarget.dataset.num)
    this.setData({
      Xindex: e.currentTarget.dataset.num
    })

  },
  onLoad: function () {
    this.getZhanStutes()
    // this.getgongdanXiangqing()
    this.hoemPeople()
    this.getNowork()
    this.getToday()
    this.getsevenday()
    this.getOkwork()
    this.getCodeJ()
    this.fList()
    this.getChildrenList("20")
    this.setData({
      height: wx.getSystemInfoSync().windowHeight * this.data.num * 2,
      width: wx.getSystemInfoSync().windowWidth * 2,
    })
    // console.log(this);
    setTimeout(() => {
      this.initpie(this.data.piedataO);
    }, 500);
  },
  // 第一个图表
  initChart(createT, jichengN, dianliN, wangluoN, shebeiN) {
    let ecComponent = this.selectComponent('#mychart-dom')
    ecComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      this.setOptionO(chart, createT, jichengN, dianliN, wangluoN, shebeiN);
      return chart;
    })

  },

  //第二个图表
  initpie: function (piedata) {
    let ecComponent = this.selectComponent('#mychart-dom-pie')
    ecComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      this.setOption(chart, piedata);
      return chart;
    })
  },
  // 第三个图表
  initChartThree(nickNameO, sumO) {
    let ecComponent = this.selectComponent('#mychart-dom-one')
    ecComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      this.setOptionT(chart, nickNameO, sumO);
      return chart;
    })

  },
  setOption(chart, piedata) {
    var option = {
      backgroundColor: '',
      tooltip: {
        trigger: 'item'
      },
      legend: { //显示图例
        show: false,
        top: '5%',
        left: 'center'
      },
      series: [{
        label: {
          normal: {
            fontSize: 14
          }
        },
        type: 'pie',
        center: ['50%', '60%'], //位置
        radius: ['20%', '30%'], //圈大小
        data: piedata
      }]
    };
    chart.setOption(option);
    return chart;
  },

  // 获取七日内工单完成情况
  getsevenday() {
    let params = {
      fatherId: this.data.selectItemID,
      packetId: this.data.selectItemCid,
    }
    lgRequest('getsevenday', params, {
      doSuccess: r => {
        // console.log(r, '七日内工单完成情况')
        var createT = []
        var jichengN = []
        var dianliN = []
        var wangluoN = []
        var shebeiN = []
        r.data.map((item) => {
          // console.log(item);
          createT.push(item.createTime)
          jichengN.push(item.sum1)
          dianliN.push(item.sum3)
          wangluoN.push(item.sum4)
          shebeiN.push(item.sum2)
          return createT, jichengN, dianliN, wangluoN, shebeiN
        })
        var jichengA = []
        jichengA = jichengN.map(String)
        var shebeiA = []
        shebeiA = shebeiN.map(String)
        // console.log(jichengA, 'jicheng');
        // console.log(createT, jichengN, dianliN, wangluoN, shebeiN);
        this.setData({
          selectItemCid: "",
          createT: createT, //完成时间
          jichengN: jichengN, //集成问题
          dianliN: dianliN, //电力问题
          wangluoN: wangluoN, //网络问题
          shebeiN: shebeiN, //设备问题
        })
      }

    })
    setTimeout(() => {
      this.initChart(this.data.createT, this.data.jichengN, this.data.dianliN, this.data.wangluoN, this.data.shebeiN);
    }, 500);

  },
  setOptionO(chart, createT, jichengN, dianliN, wangluoN, shebeiN) {
    var option = {
      // title:{
      //   textStyle: {
      //     color: '#dbfbfc',
      //     fontSize: '12px',
      // }
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        confine: true
      },
      legend: {
        data: ['集成问题', '电力问题', '网络问题', '设备问题'],
        top: '1%',
        textStyle: { //图例字体样式
          color: "#A2F6F7",
          fontSize: 9,
          fontFamily: "微软雅黑"
        }
      },
      grid: {
        left: 20,
        right: 20,
        bottom: 15,
        top: 40,
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: createT, //内容
        axisLine: {
          lineStyle: {
            color: '#999',

          }
        },
        axisLabel: {
          inside: false,
          textStyle: {
            color: '#00F8FD',
            fontSize: '9',
            // itemSize:'0'

          }
        },
      }],
      yAxis: [{
        type: 'value',
        axisTick: {
          show: false
        },
        // data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#00F8FD'
        }
      }],
      splitLine: {
        //设置条纹显示 柱状图默认yAxis(true)
        show: false,
        //设置lineStyle即可写入样式即可
        lineStyle: {
          //这里输入线条的样式
          color: '#E5E5E530',
        }
      },
      // jichengN,dianliN,wangluoN,shebeiN
      series: [{
          name: '集成问题',
          data: jichengN,
          type: 'bar',
          legendHoverLink: true,
          label: {
            normal: {
              show: true,
              position: 'inside'
            }
          },

          itemStyle: {}
        },
        {
          name: '电力问题',
          type: 'bar',
          legendHoverLink: true,
          label: {
            normal: {
              show: true,
              position: 'inside'
            }
          },
          data: dianliN,
          itemStyle: {}
        },
        {
          name: '网络问题',
          type: 'bar',
          // stack: '总量',
          label: {
            normal: {
              show: true
            }
          },
          data: wangluoN,
          itemStyle: {}
        },
        {
          name: '设备问题',
          type: 'bar',
          // legendHoverLink: true,
          // stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'right'
            }
          },
          data: shebeiN,
          itemStyle: {}
        },

      ]
    };
    // console.log(createT,'@');
    // console.log(jichengN,'@@');
    // console.log(option, '这是option');
    chart.setOption(option);
    return chart;
  },
  setOptionT(chart, nickNameO, sumO) {
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        confine: true
      },
      // legend: {
      //   data: ['集成问题', '电力问题', '网络问题', '设备问题'],
      //   top: '1%',
      //   textStyle: { //图例字体样式
      //     color: "#A2F6F7",
      //     fontSize: 9,
      //     fontFamily: "微软雅黑"
      //   }
      // },
      grid: {
        left: 20,
        right: 20,
        bottom: 15,
        top: 40,
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: nickNameO, //内容
        axisLine: {
          lineStyle: {
            color: '#999',
          }
        },
        axisLabel: {
          inside: false,
          textStyle: {
            color: '#00F8FD',
            fontSize: '9',
          }
        },
      }],
      yAxis: [{
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#00F8FD'
        }
      }],
      splitLine: {
        show: false,
        lineStyle: {
          color: '#E5E5E530',
        }
      },
      series: [{
        name: '未完成工单',
        data: sumO,
        type: 'bar',
        legendHoverLink: true,
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(111, 162, 135, 0.2)'
        },
        itemStyle: {
          normal: {
            color: '#FF887C'
          }
        }
      }]
    };
    chart.setOption(option);
    return chart;
  }
});



// 第二个图表
// function initChartPie(canvas, width, height, dpr) {
//   const chart = echarts.init(canvas, null, {
//     width: width,
//     height: height,
//     devicePixelRatio: dpr
//   });

//   canvas.setChart(chart);



// }

// {//每一项
//   value: 5,
//   name: '数字农业 5个'
// }, {
//   value: 2,
//   name: '体育产业 2个'
// }, {
//   value: 7,
//   name: '乡村新业态 7个'
// }, {
//   value: 3,
//   name: '其他产业 3个'
// }
let chartP = null;
let chart = null
//柱状图
// function initChart(canvas, width, height, dpr) {
//   chart = echarts.init(canvas, null, {
//     width: width,
//     height: height,
//     devicePixelRatio: dpr // new
//   });
//   canvas.setChart(chart);

//   var option = {
//     // title:{
//     //   textStyle: {
//     //     color: '#dbfbfc',
//     //     fontSize: '12px',
//     // }
//     // },
//     tooltip: {
//       trigger: 'axis',
//       axisPointer: { // 坐标轴指示器，坐标轴触发有效
//         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
//       },
//       confine: true
//     },
//     legend: {
//       data: ['热度', '正面', '负面', '工单完成总数'],
//       top: '1%',
//       textStyle: { //图例字体样式
//         color: "#A2F6F7",
//         fontSize: 9,
//         fontFamily: "微软雅黑"
//       }
//     },
//     grid: {
//       left: 20,
//       right: 20,
//       bottom: 15,
//       top: 40,
//       containLabel: true
//     },
//     xAxis: [{
//       type: 'category',
//       data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"], //内容
//       axisLine: {
//         lineStyle: {
//           color: '#999',

//         }
//       },
//       axisLabel: {
//         inside: false,
//         textStyle: {
//           color: '#00F8FD',
//           fontSize: '9',
//           // itemSize:'0'

//         }
//       },
//     }],
//     yAxis: [{
//       type: 'value',
//       axisTick: {
//         show: false
//       },
//       data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
//       axisLine: {
//         lineStyle: {
//           color: '#999'
//         }
//       },
//       axisLabel: {
//         color: '#00F8FD'
//       }
//     }],
//     splitLine: {
//       //设置条纹显示 柱状图默认yAxis(true)
//       show: false,
//       //设置lineStyle即可写入样式即可
//       lineStyle: {
//         //这里输入线条的样式
//         color: '#E5E5E530',
//       }
//     },
//     series: [{
//         name: '热度',
//         type: 'bar',
//         legendHoverLink: true,
//         label: {
//           normal: {
//             show: true,
//             position: 'inside'
//           }
//         },
//         data: [300, 270, 340, 344, 300, 320, 310],
//         itemStyle: {
//           // emphasis: {
//           //   color: '#37a2da'
//           // }
//         }
//       },
//       // {
//       //   name: '正面',
//       //   type: 'bar',
//       //   stack: '总量',
//       //   label: {
//       //     normal: {
//       //       show: true
//       //     }
//       //   },
//       //   data: [120, 102, 141, 174, 190, 250, 220],
//       //   itemStyle: {
//       //     // emphasis: {
//       //     //   color: '#32c5e9'
//       //     // }
//       //   }
//       // },
//       {
//         name: '工单完成总数',
//         type: 'line',
//         stack: '总量',
//         label: {
//           normal: {
//             show: true
//           }
//         },
//         data: [120, 102, 141, 174, 190, 250, 220],
//         itemStyle: {
//           // emphasis: {
//           //   color: '#32c5e9'
//           // }
//         }
//       },
//       {
//         name: '负面',
//         type: 'bar',
//         legendHoverLink: true,
//         stack: '总量',
//         label: {
//           normal: {
//             show: true,
//             position: 'left'
//           }
//         },
//         data: [20, 32, 21, 34, 90, 130, 110],
//         itemStyle: {
//           // emphasis: {
//           //   color: '#67e0e3'
//           // }
//         }
//       },

//     ]
//   };

//   chart.setOption(option);
//   return chart;
// }
// //饼状图
// function initChartPie(canvas, width, height, dpr) {
//   const chart = echarts.init(canvas, null, {
//     width: width,
//     height: height,
//     devicePixelRatio: dpr // new
//   });
//   canvas.setChart(chart);

//   var option = {
//     backgroundColor: "",
//     series: [{
//       label: {
//         normal: {
//           fontSize: 14
//         }
//       },
//       type: 'pie',
//       center: ['50%', '50%'],
//       radius: ['20%', '40%'],
//       legend: {
//         orient: 'vertical',
//         left: 'left',
//         bottom: 0,
//         itemWidth: 11,
//         itemHeight: 6,
//         formatter: '{name}',
//         textStyle: {
//           color: '#666'
//         },
//         data: ['套餐及固定费用', '语音通话费用', '上网费', '短信费用']
//       },
//       data: [{
//           value: 55,
//           name: '上口无电'
//         }, {
//           value: 20,
//           name: '光路损坏'
//         }, {
//           value: 10,
//           name: '接头松动'
//         }, {
//           value: 20,
//           name: '无光猫'
//         }, {
//           value: 38,
//           name: '光猫故障'
//         },
//         {
//           value: 38,
//           name: '网线故障'
//         }, {
//           value: 38,
//           name: '无故障转网络'
//         }, {
//           value: 38,
//           name: '光猫无光故障'
//         }
//       ]
//     }]
//   };

//   chart.setOption(option);
//   return chart;
// }